<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	
    <title>Buzzer</title>
	
    <link rel="stylesheet" type="text/css" href="css/style.css"/>
    
	<script type="text/javascript" src="js/mootools-1.2.3-core-nc.js"></script>
    <script type="text/javascript" src="js/http_utils.js"></script>
	<script type="text/javascript" src="js/widget_utils.js"></script>
	<script type="text/javascript" src="js/buzz_utils.js"></script>
	<script type="text/javascript" src="js/location_utils.js"></script>
    <script type="text/javascript" src="js/main.js"></script>

  </head>
  <body onload="init()">
  	<div id="header"></div>
	
  	<div id="container">
  		
			<div class="screen" id="splash_screen">
				<label for="buzz_term">Enter your Buzz word:</label>
				<div class="field_left"><div class="field_right">
					<input type="text" id="buzz_term" />
				</div></div>
				
				<label for="buzz_gps">Only buzzes around me:</label>
				<input type="checkbox" id="buzz_gps" />
				
				<div onclick="searchClicked()" class="button_left"><div class="button_right">Search Buzzes!</div></div>
<!--
				<label for="">Or choose from the most used Buzzes:</label>
				<div class="item_left"><div class="item_right">iPhone</div></div>
				<div class="item_left"><div class="item_right">Android</div></div>
				<div class="item_left"><div class="item_right">iPad</div></div>
-->
			</div>
			
			<div class="screen" id="home_screen" style="display: none;">
				<div id="home_container"></div>
				<div id="home_loader" class="loader">
					<div>Searching buzzes, please wait.</div>
					<img src="images/ajax-loader.gif" />
				</div>
			</div>
			
			<div class="screen" id="user_screen" style="display: none;">
				
				<div id="user_container"></div>
				<div id="user_loader" class="loader">
					<div>Searching user buzzes, please wait.</div>
					<img src="images/ajax-loader.gif" />
				</div>
			</div> 
			
			<div class="clearer"></div>
	  	</div> 
		
		<div id="loading" style="display: none;">Loading...</div>
  </body>
</html>

